<template>
    <div>
        <mj-title type="h2" title="DatePicker 日期选择器"></mj-title>
        <div class="page-desc">选择或输入日期，支持年、月、日期等类型，支持选择范围。</div>

        <mj-title type="h5" title="基础使用"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-datepicker v-model="value" placeholder="选择日期" @input="change" transfer></mj-datepicker>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-datepicker v-model="value" placeholder="选择日期" @input="change">&lt;/mj-datepicker>
                    &lt;/template>
                    &lt;script>
                    export default {
                        data() {
                            return {
                                value:''
                            }
                        },
                        methods:{
                            change () {
                                console.log('change')
                            },
                        }
                    }
                    &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="显示年、月"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-datepicker v-model="year" format="YYYY" placeholder="选择年"></mj-datepicker>
                <mj-datepicker v-model="month" format="YYYY-MM" placeholder="选择月" style="margin-left:20px;"></mj-datepicker>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
    &lt;mj-datepicker v-model="year" format="YYYY" placeholder="选择年">&lt;/mj-datepicker>
    &lt;mj-datepicker v-model="month" format="YYYY-MM" placeholder="选择月">&lt;/mj-datepicker>
&lt;/template>
&lt;script>
export default {
    data() {
        return {
            year:'',
            month:'',
        }
    }
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="显示时间"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-datepicker v-model="time" format="YYYY-MM-DD HH:mm:ss" placeholder="选择时间"></mj-datepicker>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
    &lt;mj-datepicker v-model="time" format="YYYY-MM-DD HH:mm:ss" placeholder="选择时间">&lt;/mj-datepicker>
&lt;/template>
&lt;script>
export default {
    data() {
        return {
            time:'',
        }
    }
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="禁止选择"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-datepicker v-model="now" placeholder="选择时间" disabled></mj-datepicker>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
    &lt;mj-datepicker v-model="now" placeholder="选择时间" disabled>&lt;/mj-datepicker>
&lt;/template>
&lt;script>
export default {
    data() {
        return {
            now:'',
        }
    }
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="显示清除按钮"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-datepicker v-model="now" placeholder="选择时间"  clearable @clear="clear" ></mj-datepicker>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
    &lt;mj-datepicker v-model="now" placeholder="选择时间"  clearable @clear="clear" >&lt;/mj-datepicker>
&lt;/template>
&lt;script>
export default {
    data() {
        return {
            now:'',
        }
    },
    methods:{
        clear () {
            console.log('clear')
        },
    }
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="选择日期范围"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-datepicker v-model="range" placeholder="选择日期范围"></mj-datepicker>
                <mj-datepicker v-model="range" placeholder="选择日期范围" range-separator="至" style="margin-left:20px;" transfer></mj-datepicker>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
    &lt;mj-datepicker v-model="range" placeholder="选择日期范围">&lt;/mj-datepicker>
    &lt;mj-datepicker v-model="range" placeholder="选择日期范围" range-separator="至">&lt;/mj-datepicker>
&lt;/template>
&lt;script>
export default {
    data() {
        return {
            range:[],
        }
    }
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="设置不可选择日期"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-datepicker v-model="value" placeholder="选择日期" :disabled-date="disabledDate"></mj-datepicker>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
    &lt;mj-datepicker v-model="value" placeholder="选择日期" :disabled-date="disabledDate">&lt;/mj-datepicker>
&lt;/template>
&lt;script>
export default {
    data() {
        return {
            value:'',
        }
    },
    methods:{
        disabledDate (time) {
            var day = time.getDay();
            return day === 0 || day === 6;
        },
    }
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="自定义显示"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-datepicker v-model="value" placeholder="选择日期" :local="local"></mj-datepicker>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
    &lt;mj-datepicker v-model="value" placeholder="选择日期" :local="local">&lt;/mj-datepicker>
&lt;/template>
&lt;script>
export default {
    data() {
        return {
            value:'',
            local: {
                dow: 7, // Sunday is the first day of the week
                hourTip: 'Select Hour', // tip of select hour
                minuteTip: 'Select Minute', // tip of select minute
                secondTip: 'Select Second', // tip of select second
                yearSuffix: '', // suffix of head
                monthsHead: 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_'), // months of head
                months: 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_'), // months of panel
                weeks: 'Su_Mo_Tu_We_Th_Fr_Sa'.split('_'), // weeks,
                cancelTip: 'Cancel', // text for cancel button for daterange picker
                submitTip: 'Submit' // text for submit button for daterange picker
            }
        }
    }
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="在页面显示"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-datepicker v-model="value" placeholder="选择日期" type="inline"></mj-datepicker>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
    &lt;mj-datepicker v-model="value" placeholder="选择日期" type="inline">&lt;/mj-datepicker>
&lt;/template>
&lt;script>
export default {
    data() {
        return {
            value:'',
        }
    }
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="显示按钮"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-datepicker v-model="value" placeholder="选择日期" show-buttons @confirm="selectedDate"></mj-datepicker>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
    &lt;mj-datepicker v-model="value" placeholder="选择日期" show-buttons @confirm="selectedDate">&lt;/mj-datepicker>
&lt;/template>
&lt;script>
export default {
    data() {
        return {
            value:'',
        }
    },
    methods:{
        selectedDate (date) {
          console.log(date)
        },
    }
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="尺寸"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-datepicker v-model="value" placeholder="选择日期" size="large"></mj-datepicker>
                <mj-datepicker v-model="value" placeholder="选择日期" style="margin:0 20px;"></mj-datepicker>
                <mj-datepicker v-model="value" placeholder="选择日期" size="small"></mj-datepicker>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
    &lt;mj-datepicker v-model="value" placeholder="选择日期" size="large">&lt;/mj-datepicker>
    &lt;mj-datepicker v-model="value" placeholder="选择日期">&lt;/mj-datepicker>
    &lt;mj-datepicker v-model="value" placeholder="选择日期" size="small">&lt;/mj-datepicker>
&lt;/template>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="API"></mj-title>
        <mj-title type="h6" title="DatePicker 参数"></mj-title>
        <table class="api-table">

            <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>v-model</td>
                    <td>日期，范围选择时候是数组</td>
                    <td>Date/Array</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>name</td>
                    <td>input的name</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>type</td>
                    <td>类型，可设置参数<code>inline</code>内联模式，在页面显示</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>inputClass</td>
                    <td>自定义input class名</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>popupClass</td>
                    <td>自定义弹层class名</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>是否禁用选择器</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>clearable</td>
                    <td>是否显示清除按钮</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>placeholder</td>
                    <td>占位文本</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>rangeSeparator</td>
                    <td>两个日期间的分隔符</td>
                    <td>String</td>
                    <td>~</td>
                </tr>
                <tr>
                    <td>format</td>
                    <td>日期格式</td>
                    <td>String</td>
                    <td>
                        <ul class="page-list" style="margin-bottom:0;">
                            <li>date | daterange：</li>
                            <li>yyyy-MM-dd</li>
                            <li>datetime | datetimerange：</li>
                            <li>yyyy-MM-dd HH:mm:ss</li>
                            <li>year：yyyy</li>
                            <li>month：yyyy-MM</li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td>disabledDate</td>
                    <td>设置不可选择日期</td>
                    <td>Function</td>
                    <td>(time, format)=>{return false}</td>
                </tr>
                <tr>
                    <td>showButtons</td>
                    <td>显示确定、取消按钮</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>local</td>
                    <td>自定义显示内容</td>
                    <td>Object</td>
                    <td>{<Br/>
                    dow: 1, // Monday is the first day of the week<Br/>
                    hourTip: '选择小时', // tip of select hour<Br/>
                    minuteTip: '选择分钟', // tip of select minute<Br/>
                    secondTip: '选择秒数', // tip of select second<Br/>
                    yearSuffix: '年', // format of head<Br/>
                    monthsHead: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split(''), // months of head<Br/>
                    months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split(''), // months of panel<Br/>
                    weeks: '一_二_三_四_五_六_日'.split('_'), // weeks<Br/>
                    cancelTip: '取消', // default text for cancel button<Br/>
                    , submitTip: '提交' // default text for submit button<Br/>
                    }</td>
                </tr>
                <tr>
                    <td>transfer</td>
                    <td>将弹层置于<code>body</code>中</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>size</td>
                    <td>尺寸，可选值为<code>large</code>、<code>small</code>、或者不填</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
            </tbody>
        </table>

        <mj-title type="h6" title="DatePicker 事件"></mj-title>
        <table class="api-table">
            <thead>
                <tr>
                    <th>事件名</th>
                    <th>说明</th>
                    <th>返回值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>confirm</td>
                    <td>点击确定按钮触发</td>
                    <td></td>
                </tr>
                <tr>
                    <td>cancel</td>
                    <td>点击取消按钮触发</td>
                    <td></td>
                </tr>
                <tr>
                    <td>clear</td>
                    <td>点击清除按钮时触发</td>
                    <td></td>
                </tr>
                <tr>
                    <td>input</td>
                    <td>点击选择日期时触发</td>
                    <td></td>
                </tr>
            </tbody>
        </table>

<!--   <mj-datepicker v-model="timeRange" format="YYYY-MM-DD HH:mm:ss" :disabled-date="disabledDate" @input="change"/><br/>
  <mj-datepicker v-model="timeRange" format="YYYY-MM-DD HH:mm:ss" :disabled-date="disabledDate" :local="local" range-separator="至" transfer /><br/>
  <mj-datepicker v-model="timeRange" format="YYYY-MM-DD HH:mm:ss" :disabled-date="disabledDate" :local="local" show-buttons @confirm="selectedDate" clearable @cancel="cancel" @clear="clear" transfer /><br/>
  <mj-datepicker v-model="time" format="YYYY-MMM-DD" :local="local" transfer /><br/>
  <mj-datepicker v-model="time" format="YYYY-MM" show-buttons @confirm="selectedDate" transfer /><br/>
  <mj-datepicker v-model="time" format="YYYY"/><br/>
  <mj-datepicker v-model="empty" format="YYYY-MM-DD HH:mm:ss" clearable placeholder="select date" transfer /><br/>
  <mj-datepicker v-model="now" disabled/><br/>
  <mj-datepicker v-model="range" placeholder="选择时间范围" show-buttons @confirm="selectedDate"transfer /><br/> -->


    </div>
</template>

<script>
export default {
    data() {
        const min = new Date(2022, 2, 1, 0, 0, 0)
        const max = new Date(2022, 8, 30, 0, 0, 0)
        const now = new Date()
        return {
            empty: '',
            now: now,
            time: min,
            min: min,
            max: max,
            timeRange: [min, now],
            range: [],
            value:'',
            year:'',
            month:'',
            local: {
                dow: 7, // Sunday is the first day of the week
                hourTip: 'Select Hour', // tip of select hour
                minuteTip: 'Select Minute', // tip of select minute
                secondTip: 'Select Second', // tip of select second
                yearSuffix: '', // suffix of head
                monthsHead: 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_'), // months of head
                months: 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_'), // months of panel
                weeks: 'Su_Mo_Tu_We_Th_Fr_Sa'.split('_'), // weeks,
                cancelTip: 'Cancel', // text for cancel button for daterange picker
                submitTip: 'Submit' // text for submit button for daterange picker
            }
        }
    },
    methods:{
        disabledDate (time) {
          // return time < this.min || time > this.max
            var day = time.getDay();
            return day === 0 || day === 6;
        },
        selectedDate (date) {
          console.log('You have been selected:')
          console.log(date)
        },
        clear () {
          console.log('clear')
        },
        cancel () {
          console.log('cancel')
        },
        change (val) {
          console.log(val)
        }

    }
}
</script>